<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身式Java学习平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        h1{
            color:gold;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.95);
            padding: 15px 30px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .nav-brand {
            font-size: 24px;
            font-weight: bold;
            color: #764ba2;
            display: flex;
            align-items: center;
        }

        .nav-brand i {
            margin-right: 10px;
            font-size: 26px;
        }

        .nav-buttons {
            display: flex;
            gap: 15px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
        }

        .btn-outline {
            border: 2px solid #764ba2;
            color: #764ba2;
            background: transparent;
        }

        .btn-primary {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
        }

        .btn-outline:hover {
            background: #764ba2;
            color: white;
        }

        /* 主要内容区域 */
        .main-content {
            background: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            margin-bottom: 30px;
        }

        .welcome-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .welcome-title {
            font-size: 36px;
            color: #333;
            margin-bottom: 15px;
        }

        .welcome-subtitle {
            font-size: 18px;
            color: #666;
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }

        /* 用户信息卡片 */
        .user-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .user-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user-details h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .user-stats {
            background: rgba(255, 255, 255, 0.2);
            padding: 15px 25px;
            border-radius: 10px;
            text-align: center;
        }

        .level {
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .exp {
            font-size: 16px;
        }

        /* 功能卡片 */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }

        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s;
            border: 1px solid #f0f0f0;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .feature-icon {
            font-size: 40px;
            margin-bottom: 15px;
            color: #764ba2;
        }

        .feature-card h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .feature-card p {
            color: #666;
            line-height: 1.5;
        }

        /* 未登录状态 */
        .guest-section {
            text-align: center;
            padding: 50px 20px;
        }

        .guest-title {
            font-size: 42px;
            color: forestgreen;
            margin-bottom: 20px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .guest-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .btn-large {
            padding: 15px 35px;
            font-size: 18px;
        }

        .btn-light {
            background: white;
            color: #764ba2;
        }

        /* 页脚 */
        footer {
            text-align: center;
            color: white;
            padding: 30px 0;
            margin-top: 40px;
        }

        footer p {
            margin-bottom: 15px;
            opacity: 0.9;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
        }

        .social-icons a {
            color: white;
            font-size: 20px;
            transition: transform 0.3s;
        }

        .social-icons a:hover {
            transform: translateY(-3px);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .user-info {
                flex-direction: column;
                text-align: center;
            }

            .user-stats {
                margin-top: 20px;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .nav-buttons {
                flex-direction: column;
                width: 100%;
                gap: 10px;
            }

            .navbar {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body th:data-logged-in="${user != null}" th:data-entry-source="${entrySource}">
<div class="container">
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-brand">
            <i>🚀</i> 渐进学习平台
        </div>
        <div class="nav-buttons">
            <!-- 根据用户登录状态显示不同按钮 -->
            <th:block th:if="${user} != null">
                <!-- 已登录：显示用户信息和退出 -->
                <span style="margin-right: 15px; color: #764ba2;">
                    欢迎，<span th:text="${user?.username}">用户</span>
                </span>
                <a href="/auth/logout" class="btn btn-outline">退出</a>
            </th:block>
            <th:block th:if="${user} == null">
                <!-- 未登录：显示登录注册 -->
                <a href="/auth/login" class="btn btn-outline">登录</a>
                <a href="/auth/register" class="btn btn-primary">注册</a>
            </th:block>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 已登录状态 -->
        <div th:if="${user != null}">
            <div class="welcome-section">
                <h1 class="welcome-title">欢迎回到渐进学习平台！</h1>
                <p class="welcome-subtitle">继续你的渐进超负荷学习之旅，记录每一次进步，成为更好的自己！</p>
            </div>

            <div class="user-card">
                <div class="user-info">
                    <div class="user-details">
                        <!-- 动态绑定用户数据 -->
                        <h2>你好，<span th:text="${user?.username}"></span>！</h2>
                        <p>
                            邮箱：<span th:text="${user?.email} ?: '未设置'"></span> |
                            年龄：<span th:text="${user?.age} ?: '未设置'"></span>岁
                        </p>
                        <p>
                            注册时间：<span th:text="${user != null and user.createTime != null ? #dates.format(user.createTime, 'yyyy-MM-dd HH:mm') : '未设置'}"></span>
                        </p>
                    </div>
                    <div class="user-stats">
                        <div class="level">Lv.<span th:text="${user?.level}">5</span></div>
                        <div class="exp">知识值：<span th:text="${user?.experience}">850</span></div>
                    </div>
                </div>
            </div>

            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📚</div>
                    <h3>今日学习计划</h3>
                    <p>根据你的学习进度和能力水平，智能安排今日学习任务。</p>
                </div>
                <!-- indexPage.html 缺少知识训练馆的入口链接 -->
                <!-- 需要添加： -->
                <a href="/knowledge/gym" class="feature-card">
                    <div class="feature-icon">🏋️</div>
                    <h3>知识训练馆</h3>
                    <p>进入Java知识训练馆，开始你的学习挑战</p>
                </a>

                <div class="feature-card">
                    <div class="feature-icon">🎯</div>
                    <h3>渐进式挑战</h3>
                    <p>像健身一样逐步增加难度，实现知识的渐进超负荷。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>学习进度追踪</h3>
                    <p>记录你的学习成果和知识掌握情况，直观看到自己的进步。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">👥</div>
                    <h3>学习社区</h3>
                    <p>与其他学习者分享经验，互相鼓励，共同成长。</p>
                </div>
            </div>
        </div>

        <!-- 未登录状态 -->
        <div th:if="${user == null}">
            <div class="guest-section">
                <h1 class="guest-title">开启你的知识成长之旅</h1>
                <p class="guest-subtitle">渐进学习 · 智能计划 · 社区支持 · 成就激励</p>
                <p class="guest-subtitle">像健身一样科学学习，让知识积累变得可衡量、可持续！</p>

                <div class="cta-buttons">
                    <a href="/auth/register" class="btn btn-primary btn-large">立即开始</a>
                    <a href="/auth/login" class="btn btn-light btn-large">会员登录</a>
                </div>
            </div>

            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🎯</div>
                    <h3>智能学习路径</h3>
                    <p>基于你的知识水平和目标，量身定制渐进式学习方案。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📖</div>
                    <h3>知识体系构建</h3>
                    <p>系统化学习各个领域知识，建立完整的知识结构。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🏆</div>
                    <h3>成就激励系统</h3>
                    <p>通过等级和知识值系统，激励你持续学习进步。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🤝</div>
                    <h3>学习同伴PK系统</h3>
                    <p>与志同道合的学习者一起进步，互相监督鼓励。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 渐进学习平台 - 让学习像健身一样科学有效</p>
        <div class="social-icons">
            <a href="#">📱</a>
            <a href="#">💬</a>
            <a href="#">📧</a>
        </div>
    </footer>
</div>

<script>
    // 删除原来的状态切换逻辑，现在由Thymeleaf控制
    document.addEventListener('DOMContentLoaded', function() {
        // 只保留卡片悬停效果
        const cards = document.querySelectorAll('.feature-card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.12)';
            });

            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.08)';
            });
        });

        // 页面加载后播放对应音效
        setTimeout(() => {
            triggerIndexAudio();
        }, 500);
    });

    let pendingAudioType = null;
    let audioUnlockHandler = null;

    // 音频播放函数
    function playVoiceAudio(type) {
      const audioMap = {
        'guest': '/sounds/funny/欢迎你来到天意学习平台我们为你科学的学习保驾护航让我们开始吧.wav',
        'registerSuccess': '/sounds/funny/注册成功后首页欢迎你成为大家庭的一员科学的学习让你成为更好的自己哦.wav',
        'login': '/sounds/funny/登录后的首页觉行者我就知道你会回来继续战斗的让我一起开始变强吧.wav'
      };
      
      const audioPath = audioMap[type];
      if (!audioPath) return;
      
      const audio = new Audio(audioPath);
      audio.play().catch(err => {
        console.warn('播放音频失败，尝试等待用户交互后再播:', err);
        scheduleAudioAfterInteraction(type);
      });
    }

    function scheduleAudioAfterInteraction(type) {
      pendingAudioType = type;
      if (audioUnlockHandler) return;

      audioUnlockHandler = () => {
        document.removeEventListener('click', audioUnlockHandler);
        document.removeEventListener('keydown', audioUnlockHandler);
        const retryType = pendingAudioType;
        pendingAudioType = null;
        audioUnlockHandler = null;
        if (retryType) {
          playVoiceAudio(retryType);
        }
      };

      document.addEventListener('click', audioUnlockHandler, { once: true });
      document.addEventListener('keydown', audioUnlockHandler, { once: true });
    }

    function triggerIndexAudio() {
      const bodyEl = document.body;
      const userLoggedIn = bodyEl.dataset.loggedIn === 'true';
      const entrySource = bodyEl.dataset.entrySource || null;

      if (!userLoggedIn) {
        playVoiceAudio('guest');
        return;
      }

      if (entrySource === 'register') {
        playVoiceAudio('registerSuccess');
        return;
      }

      // 默认已登录状态播放直接登录音效
      playVoiceAudio('login');
    }
</script>
</body>
</html>